<template>
	<div class="port-page">
		<!-- 顶部按钮 -->
		<div class="but1">
			<router-link to="/home">
				<el-button type="warning" size="small" style=' margin-right: 10px;' icon="el-icon-menu">首页</el-button>
			</router-link>
		</div>
		<div class="nr">
			<div class="xsxx">
				<div class="tx"></div>
				<div class="xx">
					<div class="xx2">
						<p>学生姓名：<span>{{xsList.zwm}}</span>电话：<span>{{xsList.dh}}</span>性别：<span>{{xsList.xb}}</span>班级：<span>{{xsList.bjmc}}</span>入校时间：<span>{{xsList.zcsj}}</span></p>
						<p>公立学校：<span>{{xsList.glxx}}</span></p>
						<p>地址：<span>{{xsList.jtdz}}</span></p>
					</div>
					<div class="xx3">
						<p>剩余课时：&nbsp;&nbsp;<span>{{xsList.syks}}</span> 欠款：&nbsp;&nbsp;<span>{{xsList.qf}}</span>预存款：&nbsp;&nbsp;<span>{{xsList.yuer}}</span>状态：&nbsp;&nbsp;<span>{{xsList.zt}}</span></p>
					</div>
				</div>
			</div>
			<div class="caozuo">
				<div style="width: 20%; float: left; text-align: center;">
					<el-button type="warning" size="small" @click="componentsShow('info',xxlist)" >完善个人资料</el-button>
					<el-button type="warning" size="small" @click="componentsShow('bujiao',xxlist)">缴费</el-button>
				</div>
				<div style="width: 70%; float: left; text-align: right;">
					<el-button type="warning" size="small" v-if="this.xsList.zt=='在读'" @click="componentsShow('xx',xxlist)" >休学</el-button>
					<el-button type="warning" size="small" v-if="this.xsList.zt=='休学'" @click="componentsShow('fx',xxlist)" >上课</el-button>
<!--				<el-button type="warning" size="small" @click="componentsShow('kcjz',xxlist)">课程结转</el-button>-->
					<el-button type="warning" size="small" v-if="this.xsList.zt=='在读'" @click="componentsShow('info1',xxlist)">退学</el-button>
					<el-button type="warning" size="small" @click='componentsShow("add",xxlist)'>转校</el-button>
				</div>
			</div>
			<div class="liebiao">
				<div class="list1">
					<h2>班级列表</h2>
					<ul>
						<li><span>班级名称</span><span>课程</span><span>老师</span></li>
						<li v-for="i in this.bjList"><span>{{i.mc}}</span><span>{{i.kcmc}}</span><span>{{i.lsmc}}</span> <span><el-button type="text"@click="componentsShow('change',i)"  >转班</el-button></span></li>
					</ul>
				</div>
				<div class="list1">
					<h2>课程订单</h2>
					<ul>
						<li><span>课程名称</span><span>课次</span><span>折扣</span><span>欠缴金额</span><span>剩余课程</span><span>已交金额</span><span>状态</span></li>
						<li v-for="i in this.kcList"><span>{{i.kcmc}}</span><span>{{i.cns}}</span><span>{{i.zk}}</span><span>{{i.qf}}</span><span>{{i.syks}}</span> <span>{{i.je}}</span> <span style="width: 120px;">{{i.zt}}</span> 
						<span v-if="i.je==0 ? (i.iszf == 'N' ? true : false) : false"><el-button type="text" @click="zuofei(i)" >订单作废</el-button></span>
						<span v-if="i.zt1=='Y' ? (i.je>0 ? true : false) : false"><el-button type="text" @click="jieshu(i,'2')" >课程结转</el-button></span>
						</li>
					</ul>
				</div>
				<div class="list1">
					<h2>物品订单</h2>
					<ul>
						<li><span>物品名称</span><span>数量</span><span>折扣</span><span>欠缴金额</span><span>是否领取</span></li>
						<li v-for="i in this.wpList"><span>{{i.wpmc}}</span><span>{{i.cns}}</span><span>{{i.zk}}</span><span>{{i.qf}}</span><span>{{i.islq}}</span> 
							<span v-if="i.islq =='未领取' ? true : false"><el-button type="text"  @click="componentsShow('lq',i)">领取</el-button></span>
							<span v-if="i.islq =='未领取' ? false : true"><el-button type="text"  @click="componentsShow('lq',i)">取消领取</el-button></span>
							<span v-if="i.islq =='未领取' ? true : false"><el-button type="text"  @click="componentsShow('edit',i)" >物品退费</el-button></span></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 动画加载 -->
		<LoadingComponent v-show="isLoading"></LoadingComponent>
		<FxComponent v-if="portComponents.fx.toggle" @close="componentsHide" :params="portComponents.fx.params"></FxComponent>
		<infoComponent v-if="portComponents.info.toggle" @close="componentsHide" :params="portComponents.info.params"></infoComponent>
		<BujiaoComponent v-if="portComponents.bujiao.toggle" @close="componentsHide" :params="portComponents.bujiao.params" ></BujiaoComponent>
		<KcjzComponent v-if="portComponents.kcjz.toggle" @close="componentsHide" :params="portComponents.kcjz.params"></KcjzComponent>
		<info1Component v-if="portComponents.info1.toggle" @close="componentsHide" :params="portComponents.info1.params"></info1Component>
		<ChangeComponent v-if="portComponents.change.toggle"  @close="componentsHide"  :params="portComponents.change.params" ></ChangeComponent>
		<AddComponent v-if="portComponents.add.toggle" @close="componentsHide" :params="portComponents.add.params"></AddComponent>
		<EditComponent v-if="portComponents.edit.toggle" @close="componentsHide" :params="portComponents.edit.params"></EditComponent>
		<XxComponent v-if="portComponents.xx.toggle"  @close="componentsHide"  :params="portComponents.xx.params" ></XxComponent>
		<LqComponent v-if="portComponents.lq.toggle" @close="componentsHide" :params="portComponents.lq.params"></LqComponent>
		<!-- 添加组件 -->
		<!-- 子路由显示区域 -->
		<router-view class="port-view"></router-view>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import qs from 'qs'
	import LoadingComponent from 'components/loading'
	import InfoComponent from '@/view/educa/classManage/student/info'
	import BujiaoComponent from '@/view/cost/baoming/add'
	import KcjzComponent from '@/view/educa/studentManage/kcjz'
	import Info1Component from '@/view/cost/xstf/info1'
	import ChangeComponent from '@/view/educa/classManage/student/change'
	import AddComponent from '@/view/admin/xszxManage/add'
	import EditComponent from '@/view/cost/wptf/edit'
	import XxComponent from '@/view/educa/classManage/student/xx'
	import LqComponent from '@/view/cost/payjl/info'
	import FxComponent from '@/view/cost/txxx/fx'
	export default {
		props: ['params'],
		components: {
			LoadingComponent,
			InfoComponent,
			BujiaoComponent,
			FxComponent,
			KcjzComponent,
			Info1Component,
			ChangeComponent,
			AddComponent,
			EditComponent,
			XxComponent,
			LqComponent
		},
		data() {
			return {
				isLoading: true, //动画加载
				xsid:this.$route.query.iid+'',
				xxlist:'',
				xsList:{},
				bjList:[],
				kcList:[],
				wpList:[],
				 portComponents: {
                    info: {
						type: 'info',
						toggle: false,
						params: '',
						data: {}
					},
					bujiao: {
                        type: 'bujiao',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                     kcjz: {
                        type: 'kcjz',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                     info1: {
                        type: 'info1',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    change: {
                        type: 'change',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    add: {
                        type: 'add',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                     edit: {
                        type: 'edit',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                     xx: {
                        type: 'xx',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                     lq: {
                        type: 'lq',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    fx: {
                        type: 'fx',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                },
			}
		},
		created() {
			//          //加载页面时调用
			this.$store.dispatch('changeTitle', '学生信息'); //修改title
			this.$store.dispatch('changeRouterIndex', '/home'); //修改路由
			this.xxlist = this.$route.query.frompage
			//          this.vkeyword = this.$route.params.xsxx
//			this.xsid = this.$route.params.xsxx.row.id
            this.search();//分页获取默认数据
			this.isLoading = true; //动画开始
		},
		mounted() {
			//加载完成之后event
			this.isLoading = false; //动画结束
		},
		methods: {
			search() {
//				alert(this.xsid)
				//查询搜索触发事件
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					xsid:this.xsid,
					yhid: logininfo.id,
					xxid: logininfo.xxid,
				})
				//执行
				this.axios.post(this.$store.state.api + 'xs/xssyinfo', params2)
					.then(res => {
						console.log(res, 5656)
						let data = res.data.data;
						this.xsList = data.info[0];
						this.bjList = data.bj;
						this.kcList = data.kc;
						this.wpList = data.wp;
						for(var i in this.wpList){
							if(this.wpList[i].islq == "Y") {
								this.wpList[i].islq = "已领取"
							} else if(this.wpList[i].islq == "N") {
								this.wpList[i].islq = "未领取"
							}
						}
						
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			jieshu(list, lx) {
				console.log(list)
				this.$confirm('此操作将结束该条订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var logininfo = JSON.parse(localStorage.logininfo); //获取学校  用户id
					var params3 = qs.stringify({
						orderkcmxid: list.orderkcmxid,
						lx: lx,
						yhid: logininfo.id,
						xxid: logininfo.xxid,
					});
					this.axios.post(this.$store.state.api + 'ordermx/js', params3)
						.then(res => {
							this.$message({
								type: 'success',
								message: '结束成功！'
							});
							this.search()
						}).catch(res => {
							console.log(res)
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			zuofei(list) {
				this.$confirm('此操作将作废该条订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var logininfo = JSON.parse(localStorage.logininfo); //获取学校  用户id
					var params3 = qs.stringify({
						id: list.orderkcmxid,
						yhid: logininfo.id,
						xxid: logininfo.xxid,
					});
					this.axios.post(this.$store.state.api + 'order/zf', params3)
						.then(res => {
							this.$message({
								type: 'success',
								message: '结束成功！'
							});
							this.search()
						}).catch(res => {
							console.log(res)
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			
			/* 组件的弹框  */
			componentsShow(type, data) { //显示组件
				if(!this.xxlist.row){
					window.history.go(-1);
					return
				}
				console.log(type, data,89898)
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				this.search();
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel) {
							this.search();
						}
						return;
					}
				}
			}
		},
		computed: {
			...mapState([
				'api' //域名
			]),
			multipleDeleteDisabled() {
				if(this.multipleDelNum) {
					return false;
				} else {
					return true
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.port-page {
		font-size: 12px;
		.but1 {
			width: 30%;
			height: 50px;
			line-height: 50px;
		}
		.nr {
			width: 80%;
			margin: 0 auto;
			.xsxx {
				width: 100%;
				height: 180px;
				overflow: hidden;
				background: #fff;
				.tx {
					width: 10%;
					height: 180px;
					float: left;
					border-right: 1px solid #EBEEF5;
				}
				.xx {
					padding-top: 20px;
					width: 90%;
					height: 150px;
					float: left;
					.xx2 {
						width: 100%;
						height: 100px;
						float: left;
						p{
							width: 100%;
							height:33px;
							line-height: 33px;
							font-size: 15px;
							margin-left: 1%;
							span{
								padding-right: 1%;
								color: #58A9FC;
							}
						}
					}
					.xx3 {
						width: 100%;
						height: 50px;
						float: left;
						border-top: 1px solid #EBEEF5;
						p{
							width: 100%;
							height:50px;
							line-height: 50px;
							font-size: 15px;
							margin-left: 1%;
							span{
								padding-right: 1%;
								color: #00BFFF;
							}
						}
					}
				}
			}
			.caozuo {
				width: 100%;
				height: 50px;
				margin-top: 10px;
				line-height: 50px;
				background: #fff;
				overflow: hidden;
			}
			.liebiao {
				width: 100%;
				/*height: 900px;*/
				margin-top: 10px;
				.list1{
					width: 100%;
					background: #fff;
					margin-top: 10px;
					padding-left: 5%;
					border: 1px solid #EBEEF5;
					h2{
						margin: 10px;
					}
					ul{
						font-size: 1rem;
						width: 1000px;
						margin-left: 5%;
						padding-bottom: 20px;
						li{
							height: 40px;
							line-height: 40px;
							overflow: hidden;
							border-bottom: 1px solid #EBEEF5;
							span{
								float: left;
								width: 80px;
								height: 40px;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>